<template>
<div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="changeMuseum"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>
	<Card>
		<div class="flexCSB">
			<Button type="primary" @click="create">新增数字展览</Button>
			<div>
				<Input style="width:300px" placeholder="请输入标题" suffix="ios-search" @on-change="find"></Input>
			</div>
		</div>
		<Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
		<Page show-total class="page" :total="total" :current.sync="current" :page-size="size" show-elevator @on-change="changePage" />
		<Modal title="操作" v-model="modal">
			<Form ref="form" :model="newData" :label-width="130">
				<FormItem label="标题：" prop="name">
	          		<Input v-model="newData.name" clearable></Input>
	        	</FormItem>
	        	<FormItem label="链接：" prop="link">
	          		<Input v-model="newData.link" clearable></Input>
	        	</FormItem>
                
	        	<FormItem v-if="!show&&superAdmin=='true'" label="所属馆方：" prop="museumId">
	          		<Select filterable v-model="newData.museumId" style="width:358px">
						<Option v-for="item in museumList" :value="item.id" :key="item">{{ item.name }}</Option>
					</Select>
	        	</FormItem>
				<FormItem label="展览类型：" prop="displayType">
	          		<Select filterable v-model="newData.displayType" style="width:358px">
						<Option v-for="item in displayTypeList" :value="item.id" :key="item">{{ item.name }}</Option>
					</Select>
	        	</FormItem>
                <FormItem label="权重：" prop="weight">
                      <Input-number :min="0" v-model="newData.weight"></Input-number>
	        	</FormItem>
                <FormItem label="封面：">
                    <vue-uploadimg :imgUrl="imgUrl" :clear="clear1" @uploadImg="uploadImg"></vue-uploadimg>
                </FormItem>
	        </Form>
			<div slot="footer">
	        	<Button class="Button" type='primary' @click="submit" :loading="loading2">确认提交</Button>
	      	</div>
		</Modal>
	</Card>
</div>
</template>

<script>
import {md5} from '../../config/md5.js'
	export default{
		data(){
			return{
				columns:[
					{title:'标题',key:'name',align: 'center'},
					{title:'权重',key:'weight',align: 'center'},
					{title:'链接',key:'link',align: 'center'},
					{title:'展览类型', align: 'center',
		            	render: (h, params) => {
							 let color = "";
							 let content = "";
							 if (params.row.displayType == 1) {
							 	color = "blue";
								 content="常设展览"
							 }
							 if (params.row.displayType == 2) {
								 color = "red";
								 content = "临时展览"
							}
		              		return h(
							 "Tag",
							 {
								 props: {  color: color },
							 },
							 	content
							);
		           	 	}
		          	},
					{title:'封面', align: 'center',
		            	render: (h, params) => {
		              		return h(
							 "img",
							 {
                                  style: {
                                        width: "50%",
                                        display: "block",
                                        marginLeft: "25%",
                                        marginTop: "5px"
                                    },
								 attrs: {  src: this.prefix+params.row.pic },
							 },
							);
		           	 	}
		          	},
		          	{title:'操作', align: 'center',width:'180px',
		            	render: (h, params) => {
		              		return h('div', [
		                		h('Button', {
		                    		props: {type: 'primary'},
									style:{
										'margin-left':'10px'
									},
		                    		on: {
		                    			click: () => { this.change(params) }
		                  			}
		                		}, '修改'),
								h('Button', {
		                    		props: {type: 'error'},
									style:{
										'margin-left':'10px'
									},
		                    		on: {
		                    			click: () => { this.del(params) }
		                  			}
		                		}, '删除'),
		              		])
		           	 	}
		          	},
				],
				data:[],
				total:0,
				current:1,
                museumId:'',
				size:10,
                imgUrl:'',
                museumList:[],
				username:'',
                clear1:false,
				roles:[],
				show:false,
				superAdmin:'',
				loading1:false,
				loading2:false,
				modal:false,
				displayTypeList:[
					{
						id:1,
						name:'常设展览'
					},
					{
						id:2,
						name:"临时展览"
					}
				],
				newData:{
					link: '',
					museumId: '',
					name: '',
					pic: '',
                    weight:0,
					displayTypeList:1

				},
		        id:''

			}
		},
		created(){
			this.superAdmin=localStorage.getItem("superAdmin")
            if (this.$store.state.superAdmin == "true") {
                this.getMuseumList();
                } else {
                this.museumId = this.$store.state.museumId;
                this.getData()
                }
			
		},
		methods:{
			// 获取列表
			getData(){
				this.loading1 = true
				this.$http('/stage/virtualExhibition/getVirtualExhibition',{
					current: this.current,
					size: this.size,
					name:this.username,
                    museumId:this.museumId
		      	},'post',(res)=>{
		        	if(res.data.code == 200){
		        		this.data = res.data.data.records
		        		this.total = res.data.data.total
		        	}else{
		        		this.$Message.error(res.data.msg)
		        	}
					this.loading1 = false
		        })
			},
            getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getData()
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    uploadImg(data) {
      this.newData.pic = data;
    },
            changeMuseum() {
                this.current = 1;
                this.getData();
            },
			// 切换页码
			changePage(data){
				this.current = data
				this.getData()
			},
			// 提交
			submit(){
          		this.loading2 = true
          		var data = {}
          		// 新增
          		if(this.id == ''){
          			data = {
          				link: this.newData.link,
						museumId: this.superAdmin=='true'?this.newData.museumId:localStorage.getItem("museumId"),
						name: this.newData.name,
						pic: this.newData.pic,
						weight: this.newData.weight,
						displayType:this.newData.displayType
          			}
          		}
          		// 修改
          		else{
						data = {
          				link: this.newData.link,
						name: this.newData.name,
						pic: this.newData.pic,
						weight: this.newData.weight,
						id: this.id,
						displayType:this.newData.displayType
          			}
          			
          		}
					if(this.show){
						this.$http('/stage/virtualExhibition/updateVirtualExhibition',data,'post',(res)=>{
								if(res.data.code == 200&&res.data.data){
									this.$Message.success('修改数字展览成功')
									this.modal = false
									this.current = 1
									this.getData()
								}else{
									this.$Message.error(res.data.msg)
								}
								this.loading2 = false
							})
					}else{
						this.$http('/stage/virtualExhibition/saveVirtualExhibition',data,'post',(res)=>{
								if(res.data.code == 200&&res.data.data){
									this.$Message.success('新增数字展览成功')
									this.modal = false
									this.current = 1
                                    this.museumId=this.newData.museumId
									this.getData()
								}else{
									this.$Message.error(res.data.msg)
								}
								this.loading2 = false
							})
					}
				
			},
			del(params){
				this.$confirm('此操作将永久删除该数字展览, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				})
				.then(() => {
					this.$http(
					'/stage/virtualExhibition/deleteVirtualExhibition',
					{
						id: params.row.id
					},
					'get',
					(res) => {
						console.log(res)
						if (res.data.data == true) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						// this.reload();
                        this.current=1
						this.getData()
						}else{
							this.$message({
							type: 'error',
							message: res.data.msg
						})
						}
					}
					)
				})
				.catch(() => {
					this.$message({
					type: 'info',
					message: '已取消删除'
					})
				})
			},
			// 新增
			create(){
				this.show=false
				this.modal = true
				this.newData = {
					link: '',
					museumId: this.museumId,
					name: '',
					pic: '',
					weight: 0,
					displayType:1
				}
                 this.imgUrl = "";
                this.clear1 = !this.clear1;
				this.id = ''
				this.$refs['form'].resetFields()
			},
			// 修改
			change(params){
				console.log(params);
				this.show=true
				this.id = params.row.id
				this.newData = {
					link: params.row.link,
					name: params.row.name,
					pic: params.row.pic,
					weight: params.row.weight,
					displayType:params.row.displayType
				}
				this.imgUrl=params.row.pic
				this.modal = true
			},
			// 搜索
			find(data){
				this.username = data.target.value
				this.current = 1
				this.getData()
			},

		},
	}
</script>

<style scoped>

</style>